<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layout 管理界面大布局示例 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.10.3/dist/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="./首页.css">
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.10.3/dist/css/layui.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* 设置body高度为100%窗口高度 */
            height: 100vh;
            /* 弹性盒子模型 */
            display: flex;
            /* 限免两个属性是让body里的子类居中 */
            justify-content: center;
            align-items: center;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 350px;
            height: 450px;
            border-radius: 20px;
            background-color: #4471a3;
            /* 盒子阴影 */
            box-shadow: 15px 15px 10px rgba(33, 45, 58, 0.3);
            overflow: hidden;
            position: relative;
        }

        .container form {
            width: 350px;
            height: 200px;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
            z-index: 1;
        }

        .container form .tbx {
            width: 250px;
            height: 40px;
            outline: none;
            border: none;
            border-bottom: 1px solid #fff;
            background: none;
            color: #fff;
            font-size: 15px;
        }

        /* 设置文本框提示文本的样式 */
        .container form .tbx::placeholder {
            color: #fff;
            font-size: 15px;
        }

        .container form .sub {
            width: 250px;
            height: 40px;
            outline: none;
            border: 1px solid #fff;
            border-radius: 20px;
            letter-spacing: 5px;
            color: #fff;
            background: none;
            cursor: pointer;
            margin-top: 20px;
        }

        .container h1 {
            color: #ecf0f1;
            font-size: 50px;
            letter-spacing: 5px;
            font-weight: 100;
            /* 文字阴影 */
            text-shadow: 5px 5px 5px rgba(33, 45, 58, 0.3);
            z-index: 1;
        }

        /* 设置鼠标进入的样式 */
        .container .in {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: #cf455f;
            transform: translate(-50%, -50%);
            /* 使用in动画，持续0.5秒，缓出的时间函数，停留在最后一帧 */
            animation: in 0.5s ease-out forwards;
        }

        /* 设置鼠标离开的样式 */
        .container .out {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 1200px;
            height: 1200px;
            border-radius: 50%;
            background: #cf455f;
            transform: translate(-50%, -50%);
            /* 使用out动画，持续0.5秒，缓出的时间函数，停留在最后一帧 */
            animation: out 0.5s ease-out forwards;
        }

        /* 动画 */
        /* 设置鼠标进入时，元素的动画 */
        @keyframes in {

            /* 初始关键帧 */
            0% {
                width: 0;
                height: 0;
            }

            /* 结束关键帧 */
            100% {
                width: 1200px;
                height: 1200px;
            }
        }

        /* 设置鼠标离开时，元素的动画 */
        @keyframes out {

            /* 初始关键帧 */
            0% {
                width: 1200px;
                height: 1200px;
            }

            /* 结束关键帧 */
            100% {
                width: 0;
                height: 0;
            }
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;" class="add">添加</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;" class="find_master">查找</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a href="javascript:;" class="user_unter">
                    </a>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">表格</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">数据图</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" class="Echarts">柱形图</a></dd>
                            <dd><a href="javascript:;" class="echarts_second">扇形图</a></dd>
                            <dd><a href="javascript:;" class="echarts_third">折线图</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;">你好</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">the links</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <blockquote class=" layui-elem-quote layui-text" style="background-color: rgba(0,0,0,0);">
                    <select class="sort_first">
                        <option>请选择排序方式</option>
                        <option>价格</option>
                        <option>库存</option>
                        <option>已售</option>
                    </select>
                    <select class="sort_second">
                        <option>请选择排序方式</option>
                        <option>升序</option>
                        <option>降序</option>
                    </select>
                    <button onclick="sort()">排序</button>
                </blockquote>

                <div class="layui-card layui-panel" style="background-color: rgba(0,0,0,0);">

                    <table border="1" style="text-align: center;width: 1000px;">
                        <thead>
                            <tr>
                                <td>编号</td>
                                <td>名称</td>
                                <td>库存</td>
                                <td>价格</td>
                                <td>状态</td>
                                <td>已售</td>
                                <td>图片</td>
                                <td>日期</td>
                                <td>日期</td>
                                <td>无</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div>
                    <!-- 底部固定区域 -->
                    底部固定区域
                    <div id="demo-laypage-normal-2">
                        <div class="nb"></div>
                    </div>
                </div>

            </div>
            <div class="box" style="position: fixed;left: 700px; top: 100px;">
                <h2>Login</h2>
                <div class="input-box">
                    <label>名称</label>
                    <input type="text" class="master_name">
                </div>
                <div class="input-box">
                    <label>库存</label>
                    <input type="text" class="master_stock">
                </div>
                <div class="input-box">
                    <label>价格</label>
                    <input type="text" class="master_price">
                </div>
                <div class="input-box">
                    <label>状态</label>
                    <input type="text" class="master_status">
                </div>
                <div class="input-box">
                    <label>已售</label>
                    <input type="text" class="master_sold">
                </div>
                <div class="input-box">
                    <label>图片</label>
                    <input type="text" class="master_img">
                </div>
                <div class="btn-box">
                    <div>
                        <button onclick="add_rest()">添加</button>
                    </div>
                </div>
            </div>
            <div class="bigger" style="position: fixed;left: 700px; top: 100px;display: block;">
                <h2>Login</h2>
                <div class="input-box">
                    <label>名称</label>
                    <input type="text" class="master_name_first">
                </div>
                <div class="input-box">
                    <label>库存</label>
                    <input type="text" class="master_stock_second">
                </div>
                <div class="input-box">
                    <label>价格</label>
                    <input type="text" class="master_price_third">
                </div>
                <div class="input-box">
                    <label>状态</label>
                    <input type="text" class="master_status_four">
                </div>
                <div class="input-box">
                    <label>已售</label>
                    <input type="text" class="master_sold_five">
                </div>
                <div class="input-box">
                    <label>图片</label>
                    <input type="text" class="master_img_six">
                </div>
                <div class="btn-box">
                    <div>
                        <button onclick="gai()">修改</button>
                    </div>
                </div>
            </div>
            <div class="container" style="position: fixed;left: 700px; top: 100px;">
                <h1 class="sou">搜索</h1>
                <form action="">
                    <input type="text" class="tbx" placeholder="请输入商品名称">
                </form>
            </div>
        </div>
    </div>
    <script src="//unpkg.com/layui@2.10.3/dist/layui.js"></script>
    <script>
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element;
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                menuLeft: function (othis) { // 左侧菜单事件
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                },
                menuRight: function () {  // 右侧菜单事件
                    layer.open({
                        type: 1,
                        title: '更多',
                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                        area: ['260px', '100%'],
                        offset: 'rt', // 右上角
                        anim: 'slideLeft', // 从右侧抽屉滑出
                        shadeClose: true,
                        scrollbar: false
                    });
                }
            });
        });
    </script>
    <!-- //JQuery引入 -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        //图标跳转
        $(".Echarts").on("click", () => {
            location.assign("/表格/柱形图.html")
        })
    </script>
    <script>
        //个人中心
        $('.user_unter').on("click", () => {
            location.assign("/个人首页/个人首页.html")
        })
    </script>
    <script>
        //图片渲染
        var img = localStorage.getItem("img")
        $(".user_unter").append(`
                  <img src="${img}" class="layui-nav-img">
                                个人中心
        `)
    </script>
    <script>
        //表格开始
        // function apply() {
        //     $.ajax({
        //         type: "GET",
        //         url: "https://liu.zzgoodqc.cn/goodsx/goodslist",
        //         dataType: "json",
        //         success: (a) => {
        //             $("tbody").html("")
        //             a.data.forEach(item => {
        //                 $("tbody").append(`
        //                 <tr>
        //               <td>${item.id}</td>
        //                             <td>${item.goods_name}</td>
        //                             <td>${item.stock}</td>
        //                             <td>${item.price}</td>
        //                <td>${item.status == 1 ? "上架" : item.status == 2 ? "下架" : "其他"}</td>
        //                             <td>${item.sold}</td>
        //                             <td>    <img src="${item.img}" alt=""  style="width: 100px;height: 100px;"></td>
        //                             <td>${item.created_at}</td>
        //                             <td>${item.updated_at}</td>
        //                             <td>${item.deleted_at}</td>
        //                             <td><button onclick="dele(${item.id})">删除</button>    <button onclick="xiu(${item.id})">修改</button>                      <button onclick="xiang(${item.id})">详情</button>
        //                                     <button onclick="zhuang(${item.id},${item.status})">更换状态</button></td>
        //                             </tr>
        //             `)
        //             });
        //         },
        //         error: (e) => {
        //             console.log(e);
        //         }
        //     })
        // }
        // apply()
    </script>
    <script>
        function apply() {
            $.ajax({
                type: "GET",
                url: "https://liu.zzgoodqc.cn/goodsx/listByPage?page=1&limit=3",
                dataType: "json",
                success: (a) => {
                    $("tbody").html("")
                    a.data.forEach(item => {
                        $("tbody").append(`
                        <tr>
                      <td>${item.id}</td>
                                    <td>${item.goods_name}</td>
                                    <td>${item.stock}</td>
                                    <td>${item.price}</td>
                       <td>${item.status == 1 ? "上架" : item.status == 2 ? "下架" : "其他"}</td>
                                    <td>${item.sold}</td>
                                    <td>    <img src="${item.img}" alt=""  style="width: 100px;height: 100px;"></td>
                                    <td>${item.created_at}</td>
                                    <td>${item.updated_at}</td>
                                    <td>${item.deleted_at}</td>
                                    <td><button onclick="dele(${item.id})">删除</button>    <button onclick="xiu(${item.id})">修改</button>                      <button onclick="xiang(${item.id})">详情</button>
                                            <button onclick="zhuang(${item.id},${item.status})">更换状态</button></td>
                                    </tr>
                    `)
                    });
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
        apply()
    </script>
    <script>
        //分页开始
        //获取
        $.ajax({
            type: "GET",
            url: "https://liu.zzgoodqc.cn/goodsx/goodslist",
            dataType: "json",
            success: (a) => {
                var nums = Math.ceil(a.data.length / 3)
                for (var i = 1; i <= nums; i++) {
                    $(".nb").append(`
                        <button onclick="page(${i})" type="button" class="layui-btn layui-bg-blue">${i}</button>
                    `)
                }
            },
            error: (e) => {
                console.log(e);
            }
        })
    </script>
    <script>
        //分页
        function page(i) {
            $.ajax({
                type: "GET",
                url: `https://liu.zzgoodqc.cn/goodsx/listByPage?page=${i}&limit=3`,
                dataType: "json",
                success: (a) => {
                    $("tbody").html("")
                    a.data.forEach(item => {
                        $("tbody").append(`
                     <tr>
                      <td>${item.id}</td>
                                    <td>${item.goods_name}</td>
                                    <td>${item.stock}</td>
                                    <td>${item.price}</td>
                                    <td>${item.status == 1 ? "上架" : item.status == 2 ? "下架" : "其他"}</td>
                                    <td>${item.sold}</td>
                                    <td>    <img src="${item.img}" alt=""  style="width: 100px;height: 100px;"></td>
                                    <td>${item.created_at}</td>
                                    <td>${item.updated_at}</td>
                                    <td>${item.deleted_at}</td>
                                    <td><button onclick="dele(${item.id})">删除</button>    <button onclick="xiu(${item.id})">修改</button>                     <button onclick="xiang(${item.id})">详情</button>
                                            <button onclick="zhuang(${item.id},${item.status})">更换状态</button></td>
                                    </tr>
                    `)
                    })
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
    </script>
    <script>
        //添加
        $(".box").hide()
        $(".add").on("click", () => {
            $(".box").show()
        })
        function add_rest() {
            $.ajax({
                type: "POST",
                url: "https://liu.zzgoodqc.cn/goodsx/add",
                data: {
                    goods_name: $(".master_name").val(),
                    stock: $(".master_stock").val(),
                    price: $(".master_price").val(),
                    status: $(".master_status").val(),
                    sold: $(".master_sold").val(),
                    img: $(".master_img").val(),
                },
                dataType: "json",
                success: () => {
                    $(".box").hide()
                    apply()
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
    </script>
    <script>
        //删除
        function dele(id) {
            $.ajax({
                type: "GET",
                url: "https://liu.zzgoodqc.cn/goodsx/delete?id=" + id,
                dataType: "json",
                success: () => {
                    apply()
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
    </script>
    <script>
        //修改
        $(".bigger").hide()
        var iid
        function xiu(id) {
            iid = id
            $(".bigger").show()
        }
        function gai() {
            $.ajax({
                type: "POST",
                url: "https://liu.zzgoodqc.cn/goodsx/update?id=" + iid,
                data: {
                    goods_name: $(".master_name_first").val(),
                    stock: $(".master_stock_second").val(),
                    price: $(".master_price_third").val(),
                    status: $(".master_status_four").val(),
                    sold: $(".master_sold_five").val(),
                    img: $(".master_img_six").val(),
                },
                dataType: "json",
                success: () => {
                    $(".bigger").hide()
                    apply()
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
    </script>
    <script>
        //查找
        $(".container").hide()
        $(".find_master").on("click", () => {
            $(".container").show()
        })
        $(".sou").on("click", () => {
            $.ajax({
                type: "POST",
                url: "https://liu.zzgoodqc.cn/goodsx/search?goods_name=" + $(".tbx").val(),
                dataType: "json",
                success: (a) => {
                    a.data.forEach(item => {
                        $("tbody").html(`
                         <tr>
                      <td>${item.id}</td>
                                    <td>${item.goods_name}</td>
                                    <td>${item.stock}</td>
                                    <td>${item.price}</td>
                                   <td>${item.status == 1 ? "上架" : item.status == 2 ? "下架" : "其他"}</td>
                                    <td>${item.sold}</td>
                                    <td>    <img src="${item.img}" alt=""  style="width: 100px;height: 100px;"></td>
                                    <td>${item.created_at}</td>
                                    <td>${item.updated_at}</td>
                                    <td>${item.deleted_at}</td>
                                    <td><button onclick="dele(${item.id})">删除</button>    <button onclick="xiu(${item.id})">修改</button>                     <button onclick="xiang(${item.id})">详情</button>
                                            <button onclick="zhuang(${item.id},${item.status})">更换状态</button></td>
                                    </tr>
                        `)
                    })
                    $(".container").hide()
                },
                error: (e) => {
                    console.log(e);
                }
            })
        })
    </script>
    <script>
        //从小到大
        function fn(a, b) {
            $.ajax({
                type: "GET",
                url: `https://liu.zzgoodqc.cn/goodsx/sort?sort=${a}&type=${b}&page=1&limit=3`,
                dataType: "json",
                success: (a) => {
                    $("tbody").html("")
                    a.data.forEach(item => {
                        $("tbody").append(`
                         <tr>
                      <td>${item.id}</td>
                                    <td>${item.goods_name}</td>
                                    <td>${item.stock}</td>
                                    <td>${item.price}</td>
                                    <td>${item.status == 1 ? "上架" : item.status == 2 ? "下架" : "其他"}</td>
                                    <td>${item.sold}</td>
                                    <td>    <img src="${item.img}" alt=""  style="width: 100px;height: 100px;"></td>
                                    <td>${item.created_at}</td>
                                    <td>${item.updated_at}</td>
                                    <td>${item.deleted_at}</td>
                                    <td><button onclick="dele(${item.id})">删除</button>    <button onclick="xiu(${item.id})">修改</button>                     <button onclick="xiang(${item.id})">详情</button>
                                            <button onclick="zhuang(${item.id},${item.status})">更换状态</button></td>
                                    </tr>
                        `)
                    })
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
        // fn("asc", "price")
    </script>
    <script>
        //排序
        function sort() {
            //价格排序
            if ($(".sort_first").val() == "价格" && $(".sort_second").val() == "升序") {
                fn("asc", "price")
            } else if ($(".sort_first").val() == "价格" && $(".sort_second").val() == "降序") {
                fn("desc", "price")
            }
            //库存排序
            if ($(".sort_first").val() == "库存" && $(".sort_second").val() == "升序") {
                fn("asc", "stock")
            } else if ($(".sort_first").val() == "库存" && $(".sort_second").val() == "降序") {
                fn("desc", "stock")
            }
            //已售排序
            if ($(".sort_first").val() == "已售" && $(".sort_second").val() == "升序") {
                fn("asc", "sold")
            } else if ($(".sort_first").val() == "已售" && $(".sort_second").val() == "降序") {
                fn("desc", "sold")
            }
        }
    </script>
    <!-- //详情 -->
    <script>
        function xiang(id) {
            location.assign("/详情页/详情.html?id=" + id)
        }
    </script>
    <script>
        //更换状态
        function zhuang(iid, st) {
            if (st == 1 && '上架') {
                st = 2
            } else if (st == 2 && "下架") {
                st = 1
            }
            $.ajax({
                type: "GET",
                url: `https://liu.zzgoodqc.cn/goodsx/updateStatus?id=${iid}&status=${st}`,
                dataType: "json",
                success: (a) => {
                    apply()
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
    </script>
    <script>
        //折线跳
        $(".echarts_third").on("click", () => {
            location.assign("/表格/折线.html")
        })
    </script>
    <script>
        //扇形图
        $(".echarts_second").on("click", () => {
            location.assign("/表格/扇形图.html")
        })
    </script>
</body>

</html>